/**
 * useState 是react提供的一个函数，可以帮我们生成一个实现数据驱动页面的函数。
 * useState 该函数生成数据，当数据变了，可以实现页面的更新（无需dom操作）
 */
import {useState} from 'react';

function Counter() {
    //组件内部维护的数据 在react里面如何实现数据变化了，页面更新。
    // 1. 使用的 dom操作实现（不建议）
    // 2. 使用一些特定的 api 实现
    let arr = useState(0); // 该函数的返回值是一个数组，数组的下标为0的元素代表我们组件内部维护的数据，下标为1的是一个函数，是用于去操作我们的组件内部的数据。useState并且该函数调用时候的传递的参数，就是我们组件内部数据的初始值。
    let count1 = arr[0]; // 页面数据
    let opFn = arr[1]; // 数据操作的 api

    console.log(arr, 'arr');


    function increment() {
        count1 = count1 + 1;
        opFn(count1); // 只需要把最新的数据传递给 opFn后，count1数据就会称为传递参数的值，并且页面更新

    }

    function decrement() {
        count1 = count1 - 1;
        opFn(count1); // 只需要把最新的数据传递给 opFn后，count1数据就会称为传递参数的值，并且页面更新
    }

    return (
        <div>
            <h1>我是一个计数器</h1>
            <button onClick={increment} style={{fontSize: '30px'}}>+</button>
            <b id="container">{count1}</b>
            <button onClick={decrement} style={{fontSize: '30px'}}>-</button>
        </div>
    )
}

export default Counter;
